<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>我的</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
  <style>
    body { background:#f9f9f9; height:100vh; }
    .app-container { max-width:390px; height:100%; margin:0 auto; background:#fff; padding-bottom:80px; }
    .bottom-nav { position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:390px; display:flex; justify-content:space-around; padding:12px 0; background:#fff; border-top:1px solid #eee; }
    .bottom-nav a { display:flex; flex-direction:column; align-items:center; color:#666; font-size:12px; text-decoration:none; }
    .bottom-nav a i { font-size:20px; margin-bottom:4px; }
    .bottom-nav a.active { color:#1677ff; }
    .section { padding:16px; border-bottom:1px solid #f0f0f0; }
    .list-item { display:flex; justify-content:space-between; align-items:center; padding:12px 0; }
    .tag { padding:4px 8px; background:#f0f7ff; color:#1677ff; border-radius:9999px; font-size:12px; }
  </style>
</head>
<body>
  <div class="app-container">
    <div class="p-4">
      <div class="flex items-center gap-4 mb-4">
        <img id="avatar" class="w-16 h-16 rounded-full object-cover" src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?auto=format&fit=crop&w=100&h=100&q=80" />
        <div class="flex-1">
          <div class="flex items-center gap-2">
            <h2 id="nickname" class="text-lg font-semibold">未登录</h2>
            <span id="role-tag" class="tag hidden"></span>
          </div>
          <div class="text-gray-500 text-sm" id="desc">请登录后完善信息</div>
        </div>
        <button id="login-btn" class="px-3 py-1 bg-blue-600 text-white rounded">登录</button>
      </div>
    </div>

    <div class="section">
      <div class="list-item">
        <span>完善信息</span>
        <button id="complete-info" class="text-blue-600">去完善</button>
      </div>
      <div class="list-item">
        <span>角色选择</span>
        <button id="switch-role" class="text-blue-600">切换</button>
      </div>
      <div class="list-item">
        <span>发布职位（企业端）</span>
        <button id="post-job" class="text-blue-600">进入</button>
      </div>
      <div class="list-item">
        <span>退出登录</span>
        <button id="logout-btn" class="text-red-500">退出</button>
      </div>
    </div>

    <div class="section">
      <h3 class="font-semibold mb-2">我的收藏</h3>
      <div id="favorites" class="space-y-2 text-sm text-gray-600"></div>
    </div>

    <div class="bottom-nav">
      <a href="#" id="nav-home"><i class="fas fa-home"></i><span>首页</span></a>
      <a href="#" id="nav-msg"><i class="fas fa-comment"></i><span>消息</span></a>
      <a href="my.html" class="active"><i class="fas fa-user"></i><span>我的</span></a>
    </div>
  </div>

  <script>
    const loginBtn = document.getElementById('login-btn');
    const logoutBtn = document.getElementById('logout-btn');
    const completeBtn = document.getElementById('complete-info');
    const switchRoleBtn = document.getElementById('switch-role');
    const postJobBtn = document.getElementById('post-job');
    const roleTag = document.getElementById('role-tag');
    const nickname = document.getElementById('nickname');
    const desc = document.getElementById('desc');

    function renderUser() {
      const user = JSON.parse(localStorage.getItem('user') || 'null');
      const role = localStorage.getItem('role');
      if (user) {
        nickname.textContent = user.name || '已登录用户';
        desc.textContent = user.desc || '欢迎回来';
        roleTag.classList.remove('hidden');
        roleTag.textContent = role === 'company' ? '企业' : '人才';
        loginBtn.textContent = '已登录';
        loginBtn.disabled = true;
      } else {
        nickname.textContent = '未登录';
        desc.textContent = '请登录后完善信息';
        roleTag.classList.add('hidden');
        loginBtn.textContent = '登录';
        loginBtn.disabled = false;
      }

      // 首页/消息跳转
      const navHome = document.getElementById('nav-home');
      const navMsg = document.getElementById('nav-msg');
      if (role === 'company') {
        navHome.href = 'card-matching-company.html';
        navMsg.href = 'chat-list-company.html';
      } else {
        navHome.href = 'card-matching-talent.html';
        navMsg.href = 'chat-list-talent.html';
      }

      // 企业发布入口显示控制
      postJobBtn.parentElement.style.display = role === 'company' ? 'flex' : 'none';
    }

    loginBtn.addEventListener('click', () => { window.location.href = 'login.html'; });
    logoutBtn.addEventListener('click', () => { localStorage.removeItem('user'); alert('已退出登录'); renderUser(); });
    switchRoleBtn.addEventListener('click', () => { window.location.href = 'role-selection.html'; });
    completeBtn.addEventListener('click', () => {
      const role = localStorage.getItem('role');
      if (role === 'company') window.location.href = 'company-info.html'; else window.location.href = 'talent-info.html';
    });
    postJobBtn.addEventListener('click', () => { window.location.href = 'company-info.html#step-4'; });

    function renderFavorites() {
      const list = JSON.parse(localStorage.getItem('favorites') || '[]');
      const container = document.getElementById('favorites');
      container.innerHTML = '';
      if (!list.length) { container.innerHTML = '<div class="text-gray-400">暂无收藏</div>'; return; }
      list.forEach(item => {
        const div = document.createElement('div');
        div.className = 'flex items-center justify-between p-3 bg-gray-50 rounded';
        div.innerHTML = `<div class="pr-2"><div class="font-medium text-gray-800">${item.title}</div><div class="text-gray-500 text-xs">${item.job || ''}</div></div><button class="text-red-500 text-sm">移除</button>`;
        div.querySelector('button').addEventListener('click', () => {
          const newList = JSON.parse(localStorage.getItem('favorites') || '[]').filter(x => !(x.title===item.title && x.savedAt===item.savedAt));
          localStorage.setItem('favorites', JSON.stringify(newList));
          renderFavorites();
        });
        container.appendChild(div);
      });
    }

    renderUser();
    renderFavorites();
  </script>
</body>
</html> 